<template>
  <div class="piecing app-wrapper">
      <p class="piecing-tip">长按保存到手机</p>
      <PiecingPopup></PiecingPopup>  
      <div class="option-bar">
          <div class="option-bar-item">
              <button type="button" class="button">修改标题</button> 
          </div>
          <div class="option-bar-item">
              <button type="button" class="button">切换样式</button> 
          </div>
      </div>
  </div>
</template>

<script>
import PiecingPopup from './PiecingPopup.vue';
export default {
  components: {
      PiecingPopup
  },
  props: {},
  data() {
    return {
    };
  },
  computed: {},
  methods: {},
  created() {},
  mounted() {}
};
</script>
<style lang="scss" scoped>
.piecing {
    padding: 0 44px;
    background-color: #000;
    position: relative;
    
    .piecing-tip {
        font-size: 28px;
        color: #fff;
        line-height: 80px;
        text-align: center;
    }

    .option-bar {
        display: flex;    
        position: absolute;
        left: 44px;
        right: 44px;
        bottom: 0;
    }
    .option-bar-item {
        height: 140px;
        flex: 1;
        align-items: center;
        text-align: center;

        .button {
            width: 268px;
            height: 82px;
            border: 2px solid #fff;
            font-size: 32px;
            color: #fff;
            background: transparent;
            line-height: 80px;
            border-radius: 40px;
        }
    }


}
</style>